import { Form, Modal } from 'antd'
import InputType from '../InputType'
import { memo, useEffect } from 'react'

interface DefaultModalProps {
    open: boolean// 是否显示
    title?: string //标题
    list?: listItem[] //列表
    onCancel?: () => void //取消
    onOk?: (values: any) => void //确定
    children?: JSX.Element //子级slot
    value?: any//回显value
}
function DefaultModal(props: DefaultModalProps) {
    const [form] = Form.useForm()
    //初始化
    useEffect(() => {
        if (!props.open) {
            form.resetFields()
        }
        return
    }, [form, props.open])
    useEffect(() => {
        if (props.value) {
            form.setFieldsValue(props.value)
        }
        return
    }, [form, props.value])
    function onCancel() {
        form.resetFields()
        props.onCancel && props.onCancel()
    }
    return (
        <Modal open={props.open} forceRender title={props.title} onOk={() => form.submit()}
            onCancel={onCancel} >
            <Form onFinish={props.onOk} form={form}  >
                {
                    props.list && props.list.map((item, index) => {
                        if (item) {
                            return (
                                <div key={index}>
                                    <Form.Item
                                        name={item.name}
                                        label={item.label}
                                        rules={item.rules}
                                        initialValue={item.initialValue}
                                        extra={item.extra}
                                        hidden={item.hidden}
                                        htmlFor={item.htmlFor}
                                        wrapperCol={item.wrapperCol}
                                        colon={item.colon}
                                        dependencies={item.dependencies}
                                        valuePropName={((item.type == 'switch' || item.type == 'checkbox')) ? 'checked' : 'value'}
                                        getValueFromEvent={item.getValueFromEvent}
                                        labelCol={{ span: 5 }} >
                                        <InputType  {...item} />
                                    </Form.Item>
                                </div>
                            )
                        }
                    })
                }

            </Form>
            {props.children}
        </Modal>
    )
}

export default memo(DefaultModal)
